
<template>
	<div class="showBar" @click.stop="musicConsole">
		<!-- 播放器 -->
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1533371_hngdzrvbe8q.css" />
		<transition name="tran">
			<div class="palyer-bot" v-if="showBar">
				<!-- 歌曲封面 -->
				<div class="leftImg">
					<img :src="curSong.al.picUrl" alt="">
				</div>
				<!-- 歌手、专辑 -->
				<div class="center">
					<span v-for="(item,index) in showBar.ar" :key="index">{{item.name}}</span>
					<span>{{curSong.al.name}}</span>
				</div>
				<div class="right">
					<i @click.stop="changeSong('pre')" class="iconfont icon-shangyishou1"></i>
					<i class="iconfont" @click.stop="changeState()" :class="playerStare=='playing'?'icon-zanting':'icon-bofang'"></i>
					<i @click.stop="changeSong('next')" class="iconfont icon-xiayishou1"></i>
				</div>
			</div>
		</transition>

	</div>

</template>

<script>
	import api from '../js/api.js'
	import audio from '../js/audio.js'
	export default {
		data() {
			return {}
		},
		
		mounted() {
			this.audio.addEventListener("ended",()=>{
				window.console.log("播放结束，自动切换至下一首");
				this.changeSong("nextSong")
			})
		},
		
		methods:{	
			changeState(){	//点击播放/暂停
				if(this.playerStare=="playing"){
					this.audio.pause();
					this.$store.commit("changePlayerState",'pause');
				}else{
					this.audio.play();
					this.$store.commit("changePlayerState",'playing');
				}
			},
			
			changeSong(type){  //点击上一首/下一首
				if(type == "pre"){
					this.$store.commit("preSong")
					window.console.log("上一首");
				}else{
					this.$store.commit("nextSong")
					window.console.log("下一首");
				}
				let playList = this.$store.state.playList;
				let playingIindex = this.$store.state.playingIindex;
				
				let songUrl = `https://music.163.com/song/media/outer/url?id=${playList[playingIindex]}.mp3`
				this.audio.playSong(songUrl);
				window.console.log(songUrl);
				this.axios({  //获取音乐ID，渲染到播放器上
					url: api.songDetail + `?ids=${playList[playingIindex]}`
				}).then(res => {
					this.$store.commit("setCurrnetSong", res.data.songs[0])
				});
			},
			musicConsole(){
				this.$router.push({path:'/controlPanel'});
			},
		},
		computed: {
			curSong() {
				return this.$store.state.currnetSong
			},
			showBar() {
				return this.$store.state.currnetSong
			},
			playerStare() {
				return this.$store.state.playerStare
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tran-enter,
	.tran-leave-to {
		bottom: 0;
		width: 100%;
		position: fixed;
		transition: all 0.5s;
		transform: translateY(0%);
	}

	.tran-enter-active,
	.tran-leave-active {
		transform: translateY(100%);
		transition: all 0.5s;
	}

	.showBar {
		bottom: 0;
		width: 100%;
		overflow: hidden;
		position: fixed;
		transition: all 0.5s;
		.palyer-bot {
			height: 40px;
			display: flex;
			justify-content: end;
			line-height: 40px;
			background-color: skyblue;

			.leftImg {
				width: 16%;
				padding-top: 2px;
				text-align: center;

				img {
					width: 60%;
					border-radius: 50px;
				}
			}

			.center {
				width: 55%;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				span {
					padding-left: 20px;
					font-size: 13px;
				}
			}

			.right {
				width: 28%;
				i {
					margin: 0 5px;
					font-size: 25px;
				}
			}
		}

	}
</style>
